<template>
  <div class="mod-yckj__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.key" style="width: 300px" placeholder="用户名称/手机号/学校组织" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.type" placeholder="用户类型" clearable>
          <el-option label="全部" value="null"></el-option>
          <el-option label="小程序" :value="0"></el-option>
          <el-option label="后台添加" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.authentication" placeholder="认证状态" clearable>
          <el-option label="全部" value="null"></el-option>
          <el-option label="未认证" :value="0"></el-option>
          <el-option label="已认证" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('yckj:user:save')" type="primary" @click="addOrUpdateHandle()">新增 </el-button>
      </el-form-item>
      <!--      <el-form-item>
              <el-button v-if="state.hasPermission('yckj:user:delete')" type="danger" @click="state.deleteHandle()">删除
              </el-button>
            </el-form-item>-->
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <!--
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      -->
      <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>
      <el-table-column prop="username" label="用户信息" header-align="center" align="center">
        <template v-slot="scope">
          {{ scope.row.username }}<br />
          {{ scope.row.mobile }}
        </template>
      </el-table-column>
      <el-table-column prop="realname" label="认证" header-align="center" align="center">
        <template v-slot="scope">
          <div v-if="scope.row.authentication == 1">
            {{ scope.row.realname }}<br />
            {{ scope.row.idNo }}
          </div>
          <div v-else>未认证</div>
        </template>
      </el-table-column>
      <el-table-column prop="company" label="学校/组织" header-align="center" align="center"></el-table-column>
      <el-table-column prop="avatar" label="头像" header-align="center" align="center">
        <template v-slot="scope">
          <el-image :src="`${scope.row.avatar}`" style="width: 100px; height: 100px"></el-image>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="authentication" label="是否认证" header-align="center" align="center" width="80">
              <template v-slot="scope">
                <el-tag v-if="scope.row.type === 0" size="small" type="success">否</el-tag>
                <el-tag v-if="scope.row.type === 1" size="small" type="warning">是</el-tag>
              </template>
            </el-table-column>-->
      <el-table-column prop="type" label="类型" header-align="center" align="center" width="80">
        <template v-slot="scope">
          <el-tag v-if="scope.row.type === 0" size="small" type="success">小程序</el-tag>
          <el-tag v-if="scope.row.type === 1" size="small" type="warning">后台添加</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
      <!--      <el-table-column prop="realname" label="姓名" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="department" label="部门" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="nikename" label="昵称" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="balance" label="余额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="debtLimit" label="欠款限额/使用" header-align="center" align="center">
        <template v-slot="scope"> {{ scope.row.debtLimit }}/{{ scope.row.debtLimitUse }} </template>
      </el-table-column>
      <!--      <el-table-column prop="idNo" label="身份Id" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="score" label="积分" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="coupons" label="优惠券" header-align="center" align="center"></el-table-column>
            <el-table-column prop="authentication" label="是否认证，0否，1是" header-align="center"
                             align="center"></el-table-column>-->
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('yckj:user:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改 </el-button>
          <el-button v-if="state.hasPermission('yckj:user:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList">确定</add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./user-add-or-update.vue";

const view = reactive({
  deleteIsBatch: true,
  getDataListURL: "/yckj/user/page",
  getDataListIsPage: true,
  exportURL: "/yckj/user/export",
  deleteURL: "/yckj/user",
  dataForm: {
    key: "",
    type: "",
    authentication: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};
</script>
